<template>
  <view id="task-list">
    <van-cell-group>
      <van-cell is-link @click="showSearchBar">
        点击可进行{{ '单位' }}条件筛选
      </van-cell>
    </van-cell-group>
    <scroll-view class="list-content" scroll-y="true" @scrolltolower="toScrollBottom" bindscrolltolower="toScrollBottom" :style="$store.state.user.userInfo.permit === 0 || $store.state.user.userInfo.permit === 1 ? 'height: calc(100vh - 88rpx);' : 'height: calc(100vh - 88rpx - 114rpx);'">
      <van-checkbox-group :value="checkedMessage" @change="changeMessage">
        <view class="help-content">
          <view class="scroll-list">
            <view class="content-p" v-for="item in messageList" :key="item.id">
              <van-checkbox :name="item.id" style="margin-right: 15upx;"></van-checkbox>
              <view class="main-content">
                <view class="p-title">单位名称：{{ item.name }}</view>
                <view><image src="/static/imgs/user.png" alt="图片"></image>{{'创建人'}}：{{ item.cratorName }}</view>
                <view class="deadTime"><image src="/static/imgs/time.png" alt="图片"></image>创建时间：{{ item.createdAt.split('T')[0] }}</view>
                <view><image src="/static/imgs/menu.png" alt="图片"></image>单位介绍：{{ item.description }}</view>
              </view>
              <view class="operation">
                <text class="cancel-button" @click="deleteMessage(item)">删除</text>
                <text class="detail-button" @click="detailMessage(item)">详情</text>
                <text class="detail-button" @click="dataMessage(item)">数据</text>
              </view>
            </view>
          </view>
        </view>
        <view class="refresh">
          <image src="/static/imgs/refresh.png" alt="下滑刷新" v-if="!isLoading && !loadingFinished">
          </image>
          <span v-if="!isLoading && !loadingFinished">下滑加载更多</span>
          <view class="loading" v-if="isLoading">
            <span style="margin-right: 10px;">加载中</span>
            <van-loading size="18px"></van-loading>
          </view>
          <span v-if="loadingFinished">没有更多了哦(⊙︿⊙)</span>
        </view>
      </van-checkbox-group>
    </scroll-view>
    <view class="button-area" v-if="$store.state.user.userInfo.permit === 2">
      <van-button type="info" :loading="loadingButton" @click="addMessage" round  class="tag-btn">
        创建单位
      </van-button>
      <van-button type="danger" :loading="loadingButton" @click="batchDeleteMessage" round class="tag-btn">
        批量删除
      </van-button>
    </view>
    <van-action-sheet :show="showSearch" title="单位筛选" @close="onClose"  :close-on-click-overlay="true">
      <view id="search-form">
        <view class="search-goods">
          <van-cell-group>
            <van-field
                :value="inputName"
                clearable
                :placeholder="'请输入查询单位名称'"
                @change="inputNameChange"
            >
            </van-field>
          </van-cell-group>
        </view>
        <view style="text-align: center;padding:20rpx;">
          <van-button type="info" :loading="loadingButton" @click="searchCustomer" round >
            查询
          </van-button>
        </view>
      </view>
    </van-action-sheet>
  </view>
</template>

<script>
import {USER_DETAIL, USER_INFO} from "../../store/mutation-types";
import {batchDelete} from "../../static/utils";
import {reqCompanyList, reqDeleteCompany, reqDeleteNews, reqNewsList} from "../../api/user";

export default {
  name: "companyList",
  data () {
    return {
      checkedMessage: [],
      messageList: [],
      loadingFinished: true,
      loadingButton: false,
      inputName: '',
      myAttention: '1',
      showSearch: false,
      isLoading: false,
      curPage: 1,
      pageSize: 8
    }
  },
  methods: {
    getCompanyList (type) {
      this.isLoading = true;
      reqCompanyList({
        offset: (this.curPage - 1) * this.pageSize,
        limit: this.pageSize,
        keywords: this.inputName
      }).then(res => {
        if (!type){
          this.messageList = res.data.messageBody.list;
        } else {
          this.messageList = this.messageList.concat(res.data.messageBody.list);
        }
        if (res.data.messageBody.total === this.messageList.length){
          this.loadingFinished = true;
        } else {
          this.loadingFinished = false;
        }
        this.isLoading = false;
        this.showSearch = false;
      })
    },
    changeMessage (e) {
      this.checkedMessage = e.detail;
    },
    changeRadio (e) {
      this.myAttention = e.detail;
    },
    batchDeleteMessage () {
      if (this.checkedMessage.length === 0){
        return uni.showToast({
          title: '请选择单位',
          icon: 'none'
        })
      }
      batchDelete({
        title: '单位',
        okCallBack: () => {
          reqDeleteCompany({
            id: this.checkedMessage.join(',')
          }).then(() => {
            uni.showToast({
              title: '删除成功!'
            })
            this.curPage = 1;
            this.getCompanyList();
          })
        }
      })
    },
    addCustomer () {
      uni.navigateTo({
        url: '/pages/userAdd/userAdd'
      })
    },
    dataMessage (item) {
      this.$store.commit(USER_DETAIL, item);
      uni.navigateTo({
        url: '/pages/company/companyData'
      })
    },
    deleteMessage (item) {
      uni.showModal({
        title: '确定要删除该单位么',
        success: res => {
          if (res.confirm){
            reqDeleteCompany({
              id: item.id
            }).then(() => {
              uni.showToast({
                title: '删除成功!'
              })
              this.curPage = 1;
              this.getCompanyList();
            })
          }
        }
      })
    },
    detailMessage (item) {
      this.$store.commit(USER_DETAIL, item);
      uni.navigateTo({
        url: '/pages/company/companyDetail'
      })
    },
    addMessage () {
      uni.navigateTo({
        url: '/pages/company/companyPublish'
      })
    },
    // 图片404绑定
    picLoseBind (e) {
      var errorImgIndex = e.target.dataset.errorimg; //获取循环的下标
      var imgObject = "customerList["+ errorImgIndex +"].img"; //carlistData为数据源，对象数组
      var errorImg = {};
      errorImg[imgObject]="../../public/img/errorimg.png" ;//我们构建一个对象
      this.errorImg = errorImg; //修改数据源对应的数据
    },
    toCustomerDetail (item) {
      this.$store.commit(USER_DETAIL, item)
      uni.navigateTo({
        url: '/pages/userDetail/userDetail'
      })
    },
    searchCustomer () {
      this.getCompanyList();
    },
    showSearchBar () {
      this.showSearch = true;
    },
    inputNameChange (e) {
      this.inputName = e.detail;
    },
    onClose () {
      this.showSearch = false;
    },
    toScrollBottom () {
      if (this.isLoading){
        return false;
      }
      if (this.loadingFinished){
        return false;
      }
      this.curPage ++;
      this.getCompanyList(1);
    }
  },
  onShow () {
    this.getCompanyList();
  }
}
</script>

<style lang="less">
/* pages/task/task.wxss */
#task-list {
  background: #F6F6F6;
  min-height: 100vh;
  overflow: hidden;
}
#task-list .p-title {
  font-size: 16px !important;
  font-weight: 550 !important;
  color: #333333;
  margin-bottom: 10rpx;
}
#task-list .help-head {
  background: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.3rem;
  position: relative;
}
#task-list .help-head .arrow-left {
  position: absolute;
  left: 0.3rem;
}
#task-list .help-head .arrow-left svg {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.1rem;
}
#task-list .help-head span {
  font-size: 0.36rem;
  font-weight: 800;
  color: #333333;
  line-height: 36px;
  text-align: center;
  flex: 1;
  margin-bottom: 0;
}
#task-list .help-content {
  padding: 0.45rem;
  padding-bottom: 0;
}
#task-list .help-content .content-p {
  text-align: left;
  color: #646464;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.45rem;
  font-size: 14px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#task-list .help-content .content-p .main-content{
  display: flex;
  flex-direction: column;
}
#task-list .help-content .content-p .main-content .extra-bottom{
  margin-block-end: 0;
}
#task-list .help-content .content-p .operation{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#task-list .help-content .content-p .operation text{
  border: 1px solid #5599ff;
  color: #5599ff !important;
  padding: 10rpx 20rpx;
  font-size: 25rpx;
  border-radius: 30rpx;
  margin: 20rpx 0;
}
#task-list .help-content .content-p .detail-button{
  top: 58%;
}
#task-list .van-cell__value{
  text-align: center;
}
#task-list #search-form button{
  text-align: center;
  margin: 15rpx 30rpx 15rpx 0;
}
#task-list .help-content .content-p .main-content > view {
  margin-block-start: 0;
  margin-block-end: 0.8rem;
  font-weight: 500;
  color: #333333;
  font-size: 30upx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#task-list .help-content .content-p view .tips-warning {
  color: #ff1940;
}
#task-list .help-content .content-p view .tips-success {
  color: #5599ff;
}
#task-list .help-content .content-p view .tips-no {
  color: #07C160;
}
#task-list .help-content .content-p image {
  width: 0.75rem;
  height: 0.7rem;
  margin-right: 0.45rem;
}
#task-list .refresh {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.27rem 0;
}
#task-list .refresh image {
  width: 28rpx;
  height: 28rpx;
}
#task-list .refresh span {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  margin-left: 0.35rem;
  color: #cccccc;
}
#task-list .button-area {
  padding: 0.4rem 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 1px 0px #333333;
  position: fixed;
  bottom: 0;
}
#task-list .button-area .tag-btn {
  margin: 0 0.5rem;
  border-radius: 4px;
}
#task-list .button-area .van-button--primary {
  background: #4791F4;
  border: 1px solid #4791F4;
}
/*# sourceMappingURL=task.css.map */
</style>